<template>
  <div class="Chuzu">
    <header>
      <van-icon name="arrow-left" @click="fanhuia" />
      <span>发布房源</span>
      <span></span>
    </header>
    <main>
      <ul>
        <li>房源信息</li>
        <li>
          <span>小区名称</span>
          <p>
            <span>请输入小区名称</span>
            <van-icon name="arrow" />                     
          </p>
        </li>
        <li>
          <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 金</span>
          <van-field v-model="value" placeholder="请输入租金/月" />
          <span>￥/月</span>
        </li>
        <li>
          <span>建筑面积</span>
          <van-field v-model="value" placeholder="请输入建筑面积" />
          <span>m2</span>
        </li>
        <li>
          <span>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span>
          <van-field v-model="fieldValue" is-link @click="show = true" />
          <van-popup v-model="show" position="bottom">
            <van-picker show-toolbar :columns="columns" :default-index="2" />
          </van-popup>
        </li>
        <li>
          <span>所在楼层</span>
          <van-field v-model="fieldValue" is-link @click="sho = true" />
          <van-popup v-model="sho" position="bottom">
            <van-picker show-toolbar :column="column" :default-index="2" />
          </van-popup>
        </li>
        <li>
          <span>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</span>
          <van-field v-model="fieldValue" is-link @click="sho = true" />
          <van-popup v-model="sho" position="bottom">
            <van-picker show-toolbar :column="column" :default-index="2" />
          </van-popup>                                                      
        </li>
        <li>房屋标题</li>
        <li>
          <p>请输入标题(列如：整租 小区名 2室5000元)</p>
        </li>
      </ul>
      <div class="List_flex">
        <p>房屋图片</p>
        <van-uploader v-model="fileList">
          <template #preview-cover="{ file }">
            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
          </template>
        </van-uploader>
      </div>
      <div class="list_quer">
        <p>房屋配置</p>         
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      value: "",
      show: false,
      fieldValue: "",
      columns: [],
      column: [],
      sho: false,
      fileList:[],
      data:[]
    };
  },
  created() {
    axios.get("http://47.102.145.189:8009/houses/params").then((res) => {
      this.columns = JSON.parse(JSON.stringify(res.data.body.roomType));
      console.log("columns...", res.data.body);
    });
    // axios.get("http://47.102.145.189:8009/houses/params").then(res=>{
    //   this.columns=JSON.parse(JSON.stringify(res.data.body.floor))
    //   console.log("columns...",res.data.body)
    // })
    axios.get("http://47.102.145.189:8009/houses/params/?supporting").then(res=>{
      this.data = res.data.body.supporting
      console.log("ress...",res.data.body.supporting)
    })
  },
  methods: {
    fanhuia() {
      this.$router.go("-1");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style scoped lang="scss">
.Chuzu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
header {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  background: #f2f6fc;
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
main {
  flex: 1;
  overflow: scroll;
}
ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  li {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #ccc;

    p {
      display: flex;
      height: 100%;
      align-items: center;
    }
  }
}
.van-cell {
  flex: 1;
  height: 100%;
}
.van-cascader {
  height: 40%;
}
 .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
  .List_flex{
    width: 100%;
    display: flex;
    flex-direction: column;
     padding:10px 10px;
    p{
      width: 100%;
      height: 50px;
      line-height: 50px;
     
    }
  }
</style>
